<script setup lang="ts">
import type {FormInstance, FormRules} from "element-plus";
import {CERTIFICATE_TYPE} from "~/const/Maps";
import {useGet} from "~/utils/utils";
definePageMeta({
  title:'添加认证',
  layout:'admin',
})

const rules=reactive<FormRules>({
  certification_type:[{required:true,message:'请选择认证类型',trigger:'change'}],
  id_card_front:[
      {required:true,message:'请上传身份证正面',trigger:'change'},
    {validator:(rule,value,callback)=>{
        if(value.length>1){
          callback(new Error('最多上传1张'));
        }else{
          callback();
        }
      },trigger:'change'
    }
  ],
  id_card_opposite:[{required:true,message:'请上传身份证反面',trigger:'change'},
    {validator:(rule,value,callback)=>{
        if(value.length>1){
          callback(new Error('最多上传1张'));
        }else{
          callback();
        }
      },trigger:'change'
    }
  ],
  surname:[{required:true,message:'请填写姓氏',trigger:'change'},
    {min:1,max:16,message:'长度在 1 到 16 个字符',trigger:'change'}
  ],
  name:[{required:true,message:'请填写名字',trigger:'change'},
    {min:1,max:16,message:'长度在 1 到 16 个字符',trigger:'change'}
  ],
  id_card_number:[{required:true,message:'请填写身份证号码',trigger:'change'},
    {pattern:/^\d{17}[\dXx]$/,message:'身份证号码格式不正确',trigger:'change'}
  ],
  business_license:[{required:true,message:'请上传营业执照',trigger:'change'},
    {validator:(rule,value,callback)=>{
        if(value.length>1){
          callback(new Error('最多上传1张'));
        }else{
          callback();
        }
      },trigger:'change'
    }
  ],
  business_license_number:[{required:true,message:'请填写营业执照号码',trigger:'change'},
    {pattern:/^[0-9a-zA-Z]{15,18}$/,message:'营业执照号码格式不正确',trigger:'change'}
  ],
  business_name:[{required:true,message:'请填写公司名字',trigger:'change'},
    {min:1,max:32,message:'长度在 1 到 32 个字符',trigger:'change'}
  ],
})
const formRef=ref<FormInstance>();
const form = reactive({
  certification_type:10,// 个人 20 公司
  id_card_front:[],//身份证正面
  id_card_opposite:[],//身份证的反面
  surname:'',//姓氏
  name:'',//名字
  sync_tpl:0,//是否同步到模版 0 否  1 是
  id_card_number:'',//身份证号码
  business_license:[],//营业执照
  business_license_number:'',//营业执照号码
  business_name:'',//公司名字
});
const getIdCard=async (file:File)=>{
  if(!file){
    return;
  }
  const {data,code}=await useGet('/tools/getIDCardInfo',{idCard:file});
  if(code==200){
    form.id_card_number=data.idNumber;
    ElMessage.success('身份证信息识别成功');
  }else{
    form.id_card_number='';
    ElMessage.error('身份正信息识别失败,需要手动输入身份证号');
  }
}
watch(()=>form.id_card_front,async (val)=>{
  if(val.length&&val[0]?.status=='success'){
    getIdCard(val[0]?.url);
  }
},{deep:true,flush:'post'})
const submit=()=>{
  if(!formRef.value){
    return;
  }
  formRef.value?.validate(async (isValid, invalidFields)=>{
    if(isValid){
      const tmp={...form,business_license:form.business_license[0]?.url,id_card_front:form.id_card_front[0]?.url,id_card_opposite:form.id_card_opposite[0]?.url};
      const {data,code}=await usePost(form.certification_type==10?'/user/certificationByPersonal':'/user/certificationByCompany',tmp);
      if(code==200){
        ElMessage.success('提交成功');
        const route=useRoute()
        const tabs=useTabsStore()
        formRef.value?.resetFields();
        formRef.value?.clearValidate();
        navigateTo('/admin/user/auth')

    }else{
      showFieldsError(invalidFields);
    }
  }
  })
}
</script>

<template>
  <div>
    <AuthenText />
    <el-card class="flex-1">
      <el-form label-suffix="：" label-width="120px" class="w-1/2 mx-52" :model="form" :rules="rules" ref="formRef">
        <el-form-item label="认证类型" prop="certification_type">
          <el-select v-model="form.certification_type">
            <el-option :value="value*1" :label="label" v-for="(label,value) in CERTIFICATE_TYPE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件姓名">
          <div class="grid grid-cols-2 gap-5 w-full">
            <el-form-item prop="surname">
              <el-input placeholder="姓" v-model="form.surname" clearable></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input placeholder="名" v-model="form.name" clearable></el-input>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="证件照">
          <div class="grid grid-cols-2 gap-5 w-full">
            <el-form-item prop="id_card_front">
              <MyUpload :limit="1" class="positive" :multiple="false" desc="人像面" v-model="form.id_card_front"></MyUpload>
            </el-form-item>
            <el-form-item prop="id_card_opposite">
              <MyUpload :limit="1" class="positive2" :multiple="false" desc="国徽面" v-model="form.id_card_opposite"></MyUpload>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="证件号码" prop="id_card_number">
          <el-input v-model="form.id_card_number" clearable placeholder="请填写身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="是否同步模版" prop="sync_tpl">
          <el-select v-model="form.sync_tpl">
            <el-option :value="ind" :label="item" v-for="(item,ind) in ['否','是']"></el-option>
          </el-select>
        </el-form-item>

        <template v-if="form.certification_type==20">
          <el-form-item label="营业执照" prop="business_license">
            <div class="grid grid-cols-2 w-full gap-5">
              <MyUpload :limit="1" class="entries" :multiple="false" desc="营业执照" v-model="form.business_license"></MyUpload>
            </div>
          </el-form-item>
          <el-form-item label="公司名称" prop="business_name">
            <div>
              <el-input type="text" placeholder="请填写公司名字" clearable v-model="form.business_name"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="执照号码" prop="business_license_number">
            <div>
              <el-input type="text" placeholder="请填写公司名字" clearable v-model="form.business_license_number"></el-input>
            </div>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<style scoped lang="scss">
::v-deep(.el-form-item__content){
  align-items: flex-start;
}
</style>